<template>
  <a-modal :maskClosable="false" :open="model" class="ant-modal-dray" @cancel="handleCancel" width="600px">
    <a-form
      ref="formRef"
      :label-col="layout.labelCol"
      :model="formState"
      :rules="rules"
      :wrapper-col="layout.wrapperCol">
      <a-form-item ref="name" label="shareUrl" name="task_Url">
        <a-input-search v-model:value="formState.share_url" @search="(val) => onSearch(val, true)" />
      </a-form-item>
      <a-form-item ref="name" label="shareCode" name="share_code">
        <a-input-search v-model:value="formState.share_code" @search="(val) => onSearch(val, false)" />
      </a-form-item>
      <a-form-item ref="name" label="任务名称" name="task_name">
        <a-input v-model:value="formState.task_name" />
      </a-form-item>
      <a-form-item ref="name" label="分享ID" name="share_id">
        <a-input v-model:value="formState.share_id" />
      </a-form-item>

      <a-form-item ref="name" label="分享目录ID" name="share_file_id">
        <a-input-search v-model:value="formState.share_file_id" @search="ShareFileOpen = true" />
      </a-form-item>
      <a-form-item ref="name" label="分享模式" name="share_mode">
        <!--3 5-->
        <a-select v-model:value="formState.share_mode" placeholder="请选择">
          <a-select-option :value="3">3-普通pc链接</a-select-option>
          <a-select-option :value="5">5-移动端订阅中心链接</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item ref="name" label="保存目录ID" name="save_path_id">
        <a-input-search v-model:value="formState.save_path_id" @search="open = true" />
      </a-form-item>
      <a-form-item label="任务状态" name="status">
        <a-select v-model:value="formState.status" placeholder="请选择">
          <a-select-option :value="1">执行</a-select-option>
          <a-select-option :value="0">暂停</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="保存模式" name="save_type">
        <a-select v-model:value="formState.save_type" placeholder="请选择">
          <a-select-option :value="1">文件和文件夹（保存一次，文件内有更新无法同步）</a-select-option>
          <a-select-option :value="0">仅文件</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="任务描述" name="description">
        <a-textarea v-model:value="formState.description" />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button key="submit" :loading="loading" type="primary" @click="handleOk">保存</a-button>
    </template>
    <template #title>
      <div ref="modalTitleRef" class="modal-title" style="width: 100%; cursor: move">
        {{ isAdd ? '新建任务' : '编辑' }}
      </div>
    </template>
    <template #modalRender="{ originVNode }">
      <div ref="modalRef" :style="transformStyle">
        <component :is="originVNode" />
      </div>
    </template>
  </a-modal>
  <FolderTreeModel v-model="open" @ok="handleFolderTree" />
  <ShareFileIdSelectModal v-if="ShareFileOpen" v-model="ShareFileOpen" :options="shareCodeInfo" @ok="handleShareFile" />
</template>
<script setup>
  import { nextTick, onMounted, reactive, ref, toRaw, watch } from 'vue'
  import API from '@/api/cluodtask.js'
  import OtherAPI from '@/api/index.js'
  import { message } from 'ant-design-vue'
  import { useModalDrag } from '@/hooks/index.js'
  import FolderTreeModel from '@/components/FolderTreeModel.vue'
  import ShareFileIdSelectModal from './ShareFileIdSelectModal.vue'
  import dayjs from 'dayjs'
  import { useCloudDiskStore } from '@/stores/CloudDisk.js'

  const cloudDiskStore = useCloudDiskStore()
  const open = ref(false)
  const handleFolderTree = (row) => {
    formState.save_path_id = row.id
  }
  const modalTitleRef = ref(null)
  const modalRef = ref(null)
  const transformStyle = useModalDrag(modalRef, modalTitleRef)
  const model = defineModel()
  const $emit = defineEmits(['update'])
  const { isAdd, record } = defineProps({
    isAdd: Boolean,
    record: Object,
  })
  const loading = ref(false)
  const formRef = ref()
  const layout = {
    labelCol: { span: 5 },
    wrapperCol: {
      span: 13,
    },
  }
  onMounted(() => {
    console.log('isAdd', isAdd)
  })
  let formState = reactive({
    task_name: '',
    status: 1,
    share_id: '',
    share_file_id: '',
    description: '',
    save_path_id: '',
    share_mode: 3,
    share_code: '',
    share_url: '',
    save_type: 0,
  })
  watch(
    () => record,
    (newVal) => {
      // console.log('newVal>>>>', newVal)
      if (!isAdd) {
        formState = reactive({
          ...toRaw(newVal),
          create_time: dayjs(newVal.create_time).format('YYYY-MM-DD HH:mm:ss'),
          update_time: '',
        })

        nextTick(() => {
          shareCodeInfo.value = { shareMode: newVal.share_mode, shareId: newVal.share_id, fileId: newVal.share_file_id }
        })
      }
    },
    { deep: true, immediate: true },
  )

  const rules = {
    share_id: [
      {
        required: true,
        message: '请输入分享ID',
        trigger: 'blur',
      },
    ],
    share_file_id: [
      {
        required: true,
        message: '请输入分享目录ID',
        trigger: 'blur',
      },
    ],
    status: [
      {
        required: true,
        message: 'Please select activity resource',
        trigger: 'change',
      },
    ],
    save_type: [
      {
        required: true,
        message: '请选择',
        trigger: 'change',
      },
    ],
  }
  const handleOk = () => {
    loading.value = true
    formRef.value
      .validate()
      .then(async () => {
        if (isAdd) {
          API.creatTaskAPI({ ...formState, login_name: cloudDiskStore.CloudDiskUserInfo.loginName })
            .then((res) => {
              message.success('保存成功')
              model.value = false
              $emit('update')
            })
            .finally(() => {
              loading.value = false
            })
        } else {
          API.updateTask({ ...formState, login_name: cloudDiskStore.CloudDiskUserInfo.loginName })
            .then((res) => {
              message.success('保存成功')
              model.value = false
              $emit('update')
            })
            .finally(() => {
              loading.value = false
            })
        }
      })
      .catch((error) => {
        console.log('error', error)
        loading.value = false
      })
  }
  const resetForm = () => {
    formRef.value.resetFields()
  }

  const handleCancel = () => {
    model.value = false
  }
  const shareCodeInfo = ref({})
  const ShareFileOpen = ref(false)
  const onSearch = (shareCode, isUrl) => {
    let code = ''
    console.log('isUrl >>>', isUrl)
    if (isUrl) {
      code = shareCode.match(/\/t\/([^\/]+)/)[1] || ''
      console.log('code >>>', code)
      formState.share_code = code
    } else {
      code = shareCode
    }
    console.log('shareCode', shareCode)
    OtherAPI.getLinkInfo({ shareCode: code }).then((res) => {
      const { shareMode, shareId, fileId, fileName } = res
      shareCodeInfo.value = { shareMode, shareId: String(shareId), fileId }
      formState.share_id = String(shareId)
      formState.share_mode = shareMode
      formState.share_file_id = fileId
      formState.task_name = fileName
    })
  }
  const handleShareFile = (id) => {
    // console.log('id>>', id)
    formState.share_file_id = id
    shareCodeInfo.value.fileId = id
  }
</script>
<style lang="less"></style>
